<template>
  <div class="purse">
      <div class="people">
        <img class="icon" :src="'http://api.piver.cn/image/users/'+id+'.jpg?v='+Math.random()">
        <p>现金余额</p>
        <p>￥{{mePurse}}</p>
      </div>

      <!--<input type="button" value="充值">-->
      <div class="btn-box">
        <mt-button type="danger" size="large" @click="tixianFn">提现</mt-button>
      </div>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui'
export default {
  name: 'Purse',
  data () {
    return {
      mePurse:0,
      id:''
    }
  },

  methods: {

    tixianFn:function(){
      this.$router.push('/me/pursesubmit?money='+this.mePurse);
    },
    getMoney:function(){
      this.id = this.$route.query.id
      var  ajaxData = {};
      ajaxData.customer_id= this.id ;

      var _this=this;
      $.ajax({
        type:'post',
        url: RouteMap.peoplePurse,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){
            if(res.data.amount){
              _this.mePurse = res.data.amount;
            }
          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },

  },

  mounted:function () {
    this.getMoney();
  }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.people{
  text-align:center;
  }
.people p{
  padding-top:.5rem;
}

.people p:last-child{
  font-size:1rem;
}

.icon{
  margin-top:2rem;
  box-sizing:border-box;
  border:1px solid #aaa;
  border-radius:50%;
  width:4rem;
  height:4rem;
}

input{
  background:#ccc;
  width:90%;
  height:2rem;
  margin:.5rem .8rem 0;

}
  .btn-box{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    padding-top: 1.5rem;
  }
</style>
